/* 自定义stylus样式变量 */
/* 主题色变量 */
primaryColor = #409EFF
primaryColor2 =#b2b2b2
primarybg2 = #10141d
primaryColorYellow = #d1a56a
primaryColorWhite = white
colorGray = #363b44
colorGray22 = #30343c // yx 重复
colorGray3 = #8b9cab
colorGray4 = #b9bfbf
colorGray5 = #252a33
colorGray6 = #7e8c8d
colorGray2 = #2e3239
colorDeepGray = #1a1f2c
colorDeepBlack = #0c0e14
colorLightGray = #999999
testQQ = #000
colorWhite = #F7F7F7
colorWhite2 = #eaf2f9
colorTitleGray = #7c818e
colorBlue = #3b87f6
colorGroupBlue = #549af5
colorInputBorderBlue = #4993f7
colorBlue2 = #49a3f8
borderColor = #252a33
// 代码片段的写法
ellipsis()
    overflow:hidden
    white-space:nowrap
    text-overflow:ellipsis
.theme1
    background #fff
    color #409EFF
.theme2
    background green
    color red

// 修改图片背景的参考写法
.someUrl
    background: url('~common/pic/dixiao.png')
    background-size: 100% 100%

//  添加类的参考写法
// :class="[{active: collection}, $store.state.someUrl]"

// KTV皮肤
.themcolor1_1
    color: #409EFF // 浅黄 字体
.themcolor1_2
    color: rgb(0, 0, 0) // 黑色 值
.themcolor1_3
    color: rgba(0, 0, 0, 0.6) // 浅黑 名rgba(0, 0, 0, 0.6)
.themcolorReport1_4
    color: rgba(0, 0, 0, 0.7) // 浅黑 名   
.themcolor1_5
    color: primaryColorWhite // 白的字体   
.roomTipRed1_1
    color: red // 红色字体
.themcolor1_6
    color: #colorLightGray // 浅灰色 字体   
.themcolor1_7
    color: colorBlue
.themcolor1_8
    color: colorBlue2
.themBackground1_1
    background:primaryColorWhite // 白色背景
.themBackground1_2
    background:#FFFFE0 // 切换商家 提示背景颜色
.themBackground1_3
    background: primaryColor // 背景 蓝色 
.themBackground1_4
    background:primaryColorWhite // 白色背景
.themBackgroundBottom_1
    background: primaryColor  //蓝色 
.themBackgroundGroup1_1
    background: colorGroupBlue  //蓝色
.themBackgroundTable1_1
    background:#f7f7f7 // 表格、报表背景 白色
.themBackgroundItemTitle1_1
    background: primaryColor // 背景 蓝色 
.ThemBorderBottom1_1
    border-bottom: 1px solid #e0e0e0// 下边框 灰色
.ThemBorderTop1_1
    border-top: 1px solid #e0e0e0 // 上边框 灰色
.ThemBorderRight1_1
    border-right: 1px solid #e0e0e0// 右边框 灰色
.ThemBorder1_1
    border: 1px solid #ddd// 边框 灰色rgba(0, 0, 0, 0.4)
.ThemBorder1_2
    border: 1px solid rgba(0,0,0,0.3) // 边框 灰色rgba(0, 0, 0, 0.4)   
.homeLeftBorderBottom1_1
    border-bottom: 1px solid colorGray4// 下边框 灰色
.homeLeftBorderRight1_1
    // border-bottom: 1px solid colorGray4// 下边框 灰色
    border-bottom: none// 下边框 灰色
.backgroundMemberLevel1_1
    background: url('~common/pic/bag.png') // 会员等级图标
    background-size: 100% 100%
.tab-group-actived1_1
    &:nth-child(1)
        background: url('~common/pic/pi1.png')
        background-size: 100% 100%
    &:nth-child(2)
        background: url('~common/pic/pi2.png')
        background-size: 100% 100%
    &:nth-child(3)
        background: url('~common/pic/pi3.png')
        background-size: 100% 100%
    &:nth-child(4)
        background: url('~common/pic/pi4.png')
        background-size: 100% 100%
    &:nth-child(5)
        background: url('~common/pic/pi5.png')
        background-size: 100% 100%
    &:nth-child(6)
        background: url('~common/pic/pi6.png')
        background-size: 100% 100%
.tab-group-gray1_1
    &:nth-child(1)
        background: url('~common/pic/pi1_gray.png')
        background-size: 100% 100%
    &:nth-child(2)
        background: url('~common/pic/pi2_gray.png')
        background-size: 100% 100%
    &:nth-child(3)
        background: url('~common/pic/pi3_gray.png')
        background-size: 100% 100%
    &:nth-child(4)
        background: url('~common/pic/pi4_gray.png')
        background-size: 100% 100%
    &:nth-child(5) 
        background: url('~common/pic/pi5_gray.png')
        background-size: 100% 100%
    &:nth-child(6) 
        background: url('~common/pic/pi6_gray.png')
        background-size: 100% 100%
.demo1-item-selected1_1
    border: 1px solid #2192f1!important
    color: #2192f1!important
.demo2-item-selected1_1
    background: #ffffff url('~common/pic/icon.png') no-repeat right bottom!important
    border: 1px solid #409eff!important
    color: testQQ !important
.demo2-item-default1_1
    width: 2.7rem;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 0.2rem;
    margin-bottom: 5px;
.demo2-item-default1_2 {
    width: 80px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
    margin-bottom: 5px;
}
.demo2-item-default1_3
    width: 8rem
    height: 26px
    line-height: 26px
    text-align: center
    border-radius: 3px
    border: 1px solid #ccc
    background-color: #fff
    margin-right: 0.2rem
    margin-bottom: 5px
.choice-time-first1_1
    border-left: 1px solid rgba(0, 0, 0, 0.1)
.choice-time-pink1_1
    color: #fff!important
    background: #549af5
.choice-time-gray1_1
    color: #fff!important
    background: #d5
.icon-menu1_1
    background-image: url('~common/pic/menu.png')   
.icon-triangleDownWhite1_1
    background-image: url('~common/pic/triangleDownWhite.png')
.icon-cart1_1
    background: url('~common/pic/cart.png') 
.icon-cart1_2
    background: url('~common/pic/cartInOrder.png') 
.icon-mem1_1
    background-image: url('~common/pic/mem1.png')
.icon-manager1_1
    background-image: url('~common/pic/manager.png')
.icon-search1_1
    background-image: url('~common/pic/searchInOrder.png')
.icon-tipInRep1_1
    background-image: url('~common/pic/tipInRep.png')
.icon-scan1_1
    background-image: url('~common/pic/scan.png')
.tab-th1_1
    background-color: colorWhite
    color: testQQ
.tab-td1_1
    background-color: primaryColorWhite
    color: testQQ
.themInput1_1
    background: #eaf2f9
    &.active
        border: 0.053rem solid #4993f7
    .button-button-input-in
        color: colorGray3
    .button-button-input-in-long
        color: colorGray3
.themButton1_1
    background-image: linear-gradient(to right, #3b87f6, #49a3f8) 
.block-group-left1_1
    box-shadow: 0 0 0.256rem 0.08533333rem #e5e5e8
    background: #f5f8fa
.block-group-add1_1
    box-shadow: 0 0 0.256rem 0.08533333rem #e5e5e8
    background: #f5f8fa
.goomCurrentClassActive1_1
        border-left:4px solid #7bc9ff
        color:primaryColor
.goomCurrentClass1_1
        border-left:none
.sreach-wrapper-input1_1
        background: #e1e4e8
        color:#787878
        border:none
.useState1_1
    background: #eaf6ff
.useState1_2
    background: #feefe6
.sreach-input1_1
    background: #e1e4e8
    color: black
.inputStyle1_1
    background: #e1e4e8
    color:black
    border:1px solid rgba(0,0,0,.1)
.inputStyle1_2
    background: primaryColorWhite
    color:black
    border:1px solid #dcdfe6
    &:focus 
        border: 1px solid #dcdfe6 !important
    &:disabled
        background: rgb(45, 45, 45) !important
.main-content-gift-item-wrapper-left1_1
    background:primaryColorWhite
.choice-good-dialog1_1
    background: primaryColor
.demo4-item-selected1_1
    background: primaryColor!important
    color:primaryColorWhite!important
.taste-btn-class1_1
    background: primaryColor!important
.order-item1_1 // 蓝色= 白色
    color: primaryColor
.room-page-choice-detail-left1_1
    border-right: 1px solid colorGray6 
.room-page-choice-detail-left-item1_1
    border-bottom: 1px solid colorGray6
    border-right: 1px solid colorGray6
    &.active
        background: colorGroupBlue
        color: #fff
.room-page-choice-detail-right-item1_1
    &.active
        color: colorGroupBlue
.room-page-button-wrap-up-item1_1
    background: colorGroupBlue
    //color: primaryColorWhite
.selectStyle1_1
    background:white
    color: black
.member-list-item1_1
    color: #464646
    border-top: solid 1px rgba(0,0,0,0.1)
.member-list-item1_2
    color: gray 
.member-list-item1_3
    color: primaryColor
.radio-item-selected1_1
    background: colorBlue
    background: url('~common/pic/tick.png')
    background-size: 100% 100%
    border-color: colorBlue 
.choice-good-dialog-deposit1_1
    background: colorWhite

// 酒吧皮肤
.themcolor2_1
    color: primaryColorYellow // 黄的字体
    
.themcolor2_2
    color: primaryColor2 // 白色 值
.themcolor2_3
    color: #7c818e // 浅白色 名
.themcolorReport2_4
    color: primaryColor2 // 白色
.themcolor2_5
    color: primaryColorYellow // 黄的字体 
.themcolor2_6
    color: #7c818e // 浅灰色 字体 
.themcolor2_7
    color: primaryColorYellow // 黄的字体  
.themcolor2_8
    color: primaryColorYellow 
.roomTipRed2_1
    color: primaryColorYellow  // 黄色 包厢选择会员提示
.themBackground2_1
    background:#10141d // 黑色背景
.themBackground2_2
    background:colorGray // 切换商家 提示背景颜色
.themBackground2_3
    background: primarybg2 // 背景 黑色
.themBackground2_4
    background:colorGray // 灰色背景
.themBackgroundBottom2_1
    background: colorGray22  //灰色
.themBackgroundGroup2_1
    background: colorGray22  //蓝色
.themBackgroundTable2_1
    background:colorDeepGray // 表格、报表 背景 浅灰色
.themBackgroundItemTitle2_1
    background: #987951 // 背景 黄色 
.ThemBorderBottom2_1
    border-bottom: 1px solid borderColor // 下边框 灰色
.ThemBorderTop2_1
    border-top: 1px solid borderColor // 上边框 灰色
.ThemBorderright2_1
    border-right: 1px solid borderColor // 右边框 灰色
.ThemBorder2_1
    border: 1px solid borderColor // 边框 灰色
.ThemBorder2_2
    border: 1px solid #987951 // 边框 金色 
.homeLeftBorderBottom2_1
    border-bottom: 1px solid colorGray5// 下边框 灰色
.homeLeftBorderRight2_1
    // border-bottom: 1px solid colorGray5// 右边框 灰色
    border-bottom: none// 右边框 灰色
.backgroundMemberLevel2_1
    background: url('~common/pic/bagY.png') // 会员等级图标
    background-size: 100% 100%
.tab-group-actived2_1
    &:nth-child(1)
        background: url('~common/pic/py1.png')
        background-size: 100% 100%
    &:nth-child(2)
        background: url('~common/pic/py2.png')
        background-size: 100% 100%
    &:nth-child(3)
        background: url('~common/pic/py3.png')
        background-size: 100% 100%
    &:nth-child(4)
        background: url('~common/pic/py4.png')
        background-size: 100% 100%
    &:nth-child(5)
        background: url('~common/pic/py5.png')
        background-size: 100% 100%
    &:nth-child(6)
        background: url('~common/pic/py6.png')
        background-size: 100% 100%
.tab-group-gray2_1
    &:nth-child(1)
        background: url('~common/pic/py1_gray.png')
        background-size: 100% 100%
    &:nth-child(2)
        background: url('~common/pic/py2_gray.png')
        background-size: 100% 100%
    &:nth-child(3)
        background: url('~common/pic/py3_gray.png')
        background-size: 100% 100%
    &:nth-child(4)
        background: url('~common/pic/py4_gray.png')
        background-size: 100% 100%
    &:nth-child(5) 
        background: url('~common/pic/py5_gray.png')
        background-size: 100% 100%
    &:nth-child(6) 
        background: url('~common/pic/py6_gray.png')
        background-size: 100% 100%
.demo1-item-selected2_1
    border: 1px solid #d1a56a!important
    color: #d1a56a!important
.demo2-item-selected2_1
    background: #2c2f33 url('~common/pic/iconY.png') no-repeat right bottom!important
    border: 1px solid #d1a56a!important
    color: primaryColorYellow !important
.demo2-item-default2_1
    width: 2.7rem;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid primaryColor2;
    background-color: #2c2f33;
    margin-right: 0.2rem;
    margin-bottom: 5px;
    margin-bottom: 5px;
.demo2-item-default2_2 {
    width: 80px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid primaryColor2;
    background-color: #2c2f33;
    margin-right: 6px;
    margin-bottom: 5px;
}
.demo2-item-default2_3
    width: 8rem
    height: 26px
    line-height: 26px
    text-align: center
    border-radius: 3px
    border: 1px solid primaryColor2
    background-color: #2c2f33
    margin-right: 0.2rem
    margin-bottom: 5px
.choice-time-first2_1
        border-left: 1px solid rgba(255, 255, 255, 0.1)
.choice-time-pink2_1
        color: #fff!important
        background: #d1a56a
.choice-time-gray2_1
        color: #fff
        background: #d5
.icon-menu2_1
    background-image: url('~common/pic/menuY.png')
.icon-triangleDownWhite2_1
    background-image: url('~common/pic/triangleDownWhiteY.png')  
.icon-cart2_1
    background: url('~common/pic/cartY.png') 
.icon-cart2_2
    background: url('~common/pic/cartY.png')
.icon-mem2_1
    background-image: url('~common/pic/memY1.png')
.icon-manager2_1
    background-image: url('~common/pic/managerY.png')
.icon-search2_1
    background-image: url('~common/pic/searchInOrderY.png')
.icon-tipInRep2_1
    background-image: url('~common/pic/tipInRepY.png')
.icon-scan2_1
    background-image: url('~common/pic/scanY.png')
.tab-th2_1
    background-color: colorDeepGray
    color: colorTitleGray
.tab-td2_1
    background-color: primarybg2
    color: primaryColor2
.themInput2_1
    background: #1a1f2c
    &.active
        border: 0.053rem solid primaryColorYellow
    .button-button-input-in
        color: primaryColor2 
    .button-button-input-in-long
        color: primaryColor2 
.themButton2_1
    background-image: linear-gradient(to right, #be9f6b, #876337)
.block-group-left2_1
    box-shadow: 0 0 0.256rem 0.08533333rem #be9f6b
    background: #be9f6b
    color:primaryColorWhite
.block-group-add2_1
    box-shadow: 0 0 0.256rem 0.08533333rem #be9f6b
    background: #be9f6b
    color:primaryColorWhite    
.goomCurrentClassActive2_1
    border-left:4px solid #d1a56a
    color:primaryColorYellow
.goomCurrentClass1_1
    border-left:none
.sreach-wrapper-input2_1
    background: #10141d
    color:#b2b2b2
    border:1px solid borderColor
.sreach-input2_1
    background: #10141d
    color: primaryColor2
.inputStyle2_1
    background: colorGray !important
    color:#b2b2b2 !important
    border:1px solid borderColor !important
    &:focus 
        border: 1px solid #a48359 !important
    &:disabled
        background: #30343c !important
.useState2_1
    background: #363b44
.main-content-gift-item-wrapper-left2_1
    background:colorDeepBlack
.choice-good-dialog2_1
    background: colorGray2
.demo4-item-selected2_1
    background: primaryColorYellow!important
    color:primaryColorWhite!important
.taste-btn-class2_1
    background: primaryColorYellow!important
.order-item2_1
    color: primaryColor2
.room-page-choice-detail-left2_1
    border-right: 1px solid colorGray5 
.room-page-choice-detail-left-item2_1
    border-bottom: 1px solid colorGray5
    border-right: 1px solid colorGray5
    &.active
        background: primaryColorYellow
        color: #fff
.room-page-choice-detail-right-item2_1
    &.active
        color: primaryColorYellow
.room-page-button-wrap-up-item2_1
    background: primaryColorYellow
    //color: primaryColor2
.selectStyle2_1
    background:colorGray
    color: primaryColor2
.member-list-item2_1
    color: primaryColor2
    border-top: solid 1px colorGray5
.member-list-item2_2
    color: colorGray6 
.member-list-item2_3
    color: primaryColorYellow 
.demo6-item2_1
    width: 100%
    height: 35px
    line-height: 35px
    text-align: center
    border-radius: 3px
    border: 1px solid colorGray5
    margin-right: 6px
    margin-bottom: 5px
.radio-item-selected2_1
    background: primaryColorYellow
    background: url('~common/pic/tickY.png')
    background-size: 100% 100%
    border-color: primaryColorYellow 
.choice-good-dialog-deposit2_1
    background: colorGray2
.setPrice-class2_1
    &:after
        content: '%'
.setPrice-class2_2 
    &:after
        content: '% off'
.set-width
    width: 3.8rem
    // word-wrap:break-word
    font-size: 0.4rem
    overflow: hidden
    text-overflow:ellipsis
    white-space:nowrap
.set-table-width
    max-width: 2.8rem
    overflow: hidden
    text-overflow:ellipsis
    white-space:nowrap
    font-size: 15px
    // word-wrap:break-word
    // font-size: 0.4rem


